<script setup>
// console.log(import.meta.env.BASE_URL);
import { watch } from 'vue'
import  {useRoute,useRouter}from 'vue-router'
// const route= useRoute()
const  router =useRouter()
// watch(() => router.currentRoute.value,
// (to,from) => {
//   console.log(to,from);
// },
// {deep:true,immediate:true}
// )
</script>

<template>
  <div class="container">
    <h1>App根组件</h1>
    <router-link to="/home">Go to Home</router-link>/
    <router-link :to="{name:'about'}">Go to About</router-link>/ 
    <router-link to="/movie">Go to Movie</router-link>

    <hr>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

<style scoped>
.container{
  text-align: center;
  font-size: 16px;
}
.container a{
  padding: 10px;
  color: #000;
}
.container a.router-active{
  color: #fff;
  background-color: #000;
}
</style>
